"use client"
import Image from "next/image";
import Link from "next/link";

export default function Page() {
    return (
        <div>
            <div className={"relative h-[300px] overflow-hidden"}>
                <Image width={1280} height={400} className={"flex w-full "} src={'/images/news_banner.png'} alt={''}/>
                <div
                    className={"absolute top-0 w-full h-[300px] flex flex-col gap-y-4 justify-center items-center text-white"}>
                    <p className={"font-bold text-5xl"}>新闻中心</p>
                    <p className={""}>华为官方发布的最新动态或消息，为您提供关于华为公司的第一手资讯</p>
                </div>
            </div>
            <div className={"max-w-7xl mx-auto py-10"}>
                <NewsSection/>
                <NewsSection/>
                <NewsSection/>
                <NewsSection/>
            </div>
        </div>
    )
}


function NewsSection() {

    const news = [
        {
            id: 1,
            title: '华为入选Gartner®运营商服务和网络保障领域代表供应商',
            content: '将5G-A带入现实 2023全球移动宽带论坛',
            cover: '/images/231013-10.jpg?la=zh',
            createdAt: '3天前',
            description: ''
        }, {
            id: 2,
            title: '《2023非洲宽带展望》白皮书发布，推动数字非洲蓬勃发展',
            content: '[阿联酋，迪拜，2023年10月13日] 华为携手WBBA (The World Broadband Association) 在迪拜举行2023非洲宽带论坛，政府机构、电信监管组织、行业组织、运营商、智库及分析师齐聚一堂，就宽带行业趋势、全球最佳实践和创新解决方案等话题进行了深入探讨。会上，知名咨询公司Omdia发布了《2023非洲宽带展望》白皮书，详细阐述了非洲宽带产业发展现状、趋势及面向未来发展的举措建议。',
            cover: '/images/231016-4.jpg?la=zh',
            createdAt: '2023/11/01',
            description: ''
        }, {
            id: 3,
            title: '华为发布面向数据中心场景的下一代OTN——Kepler平台',
            content: '',
            cover: '/images/231018-1.png',
            createdAt: '2023/10/28',
            description: ''
        },
    ]

    return (
        <div className={"py-2"}>
            <div className={"flex grid-cols-12 gap-x-2 gap-y-2 "}>
                {
                    news.map((item, index) =>
                        <Link href={`/article?id=${item.id}`} key={index}
                              className={"relative col-span-4 rounded-sm overflow-hidden group bg-gray-100"}>
                            <div className={"overflow-hidden h-[300px] w-full"}>
                                <Image src={item.cover} alt={'cover'} width={400} height={300}
                                       className={"group-hover:scale-[1.05] transition-all duration-500 h-[300px] w-full object-cover"}/>
                            </div>
                            <div className={"p-2"}>
                                <p className={"font-bold line-clamp-2 h-[48px]"}>{item.title}</p>
                                <p className={"text-gray-400"}>{item.createdAt}</p>
                            </div>
                        </Link>)
                }
            </div>
        </div>
    )
}

